<template>
	<view class="recharge">
		<view class="box">
			<view class="title">
				<view class="l">提现金额</view>
				<view class="r" @click="authTo(`pages/my/withdraw/withdrawList?type=${way}`)">提现记录</view>
			</view>
			<view class="inputBox">
				<text class="icon">¥</text>
				<u-input placeholder="请输入提现金额" v-model="num" border="none"></u-input>
			</view>
			<view class="info" v-html="info"></view>
		</view>

		<view class="list">
			<image src="../../../static/ali.png" mode="" class="icon"></image>
			<view class="info">提现支付宝</view>
			<view class="select">
				<u-icon v-if="type === 2" name="checkmark-circle-fill" color="#FFC141"></u-icon>
			</view>
		</view>
		<view class="btn" @click="withdraw">立即提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 2,
				num: '',
				info: '',
				way: ''
			};
		},
		onLoad(options) {
			console.log(options)
			this.getInfo()
			this.way = options.type
		},
		methods: {
			withdraw() {
				if(!uni.$u.test.amount(this.num)) {
					this.$u.toast('请输入合法的金额');
					return
				}
				uni.$u.http.post('/withdraw', {
					num: this.num,
					types: 'withdraw',
					type: this.way
				}).then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg);
					}
				}).catch((res) => {

				})
			},
			getInfo() {
				// uni.$u.http.post('/withdraw').then(res => {
				// 	if (res.code == 1) {

				// 	}
				// }).catch((res) => {

				// })
				uni.$u.http.post('/getconfig', {
					type: 9
				}).then(res => {
					if (res.code == 1) {
						// this.info = res.data.config.map((value) => {
						// 	return this.oss(value)
						// })
						res.data.config = res.data.config.replace(/<img/g,
							"<img style='max-width:100%;height:auto'")
						this.info = res.data.config
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		height: 100vh;
		background-color: #F8FAF9;
		box-sizing: border-box;
		padding-top: 20rpx;

		.box {
			margin: 0 20rpx 40rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.l {
					color: #333333;
					font-size: 28rpx;
				}

				.r {
					color: #999;
					font-size: 28rpx;
				}
			}

			.inputBox {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				border-bottom: 1px solid #F4F4F4;
				padding-bottom: 20rpx;

				.icon {
					color: #333;
					font-weight: bold;
					font-size: 48rpx;
					margin-right: 20rpx;
				}
			}

			.info {
				color: #666;
				font-size: 26rpx;
			}
		}

		.list {
			height: 130rpx;
			margin: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.icon {
				width: 86rpx;
				height: 86rpx;
				margin-right: 20rpx;
			}

			.info {
				flex: 1;
				font-size: 32rpx;
				color: #333;
			}

			.select {
				width: 32rpx;
				height: 32rpx;
				border: 1px solid #EEEEEE;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
			}
		}

		.btn {
			margin: 200rpx auto 0;
			width: 440rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 44rpx;
			background: linear-gradient(to right, #FFDF41, #FFC141);
		}
	}
</style>
